<template>
  <div>
    <!-- 打开上传文件盒子 弹框的触发范围 -->
    <span @click.stop="card_state = true">
      <slot name="click"></slot>
    </span>
    <!-- 上传文件盒子 -->
    <div v-if="card_state" class="card_body force_center" @click.stop="exit_upload">
      <!-- 普通卡片 -->
      <div @click.stop="stopPropagationfun">
        <el-card shadow="always" class="card_box">
          <!-- 上传文件组件 -->
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="src"
            :on-change="fileChange"
            :on-preview="onPreview"
            :on-error="onError"
            :on-success="onSuccess"
            :on-remove="onRemove"
            :file-list="fileList"
            :show-file-list="true"
            :auto-upload="false"
            :multiple="true"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip"><slot></slot></div>
          </el-upload>
          <!-- 关闭盒子icon -->
          <i class="el-icon-close exit_icon" @click="exit_upload"></i>
          <!-- 关闭盒子按钮 -->
          <el-button type="warning" class="exit_button" @click="exit_upload">关闭</el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'upload',
  data() {
    return {
      fileList: [],
      card_state: false,
    }
  },
  props: {
    // {
    //   type: String,
    //   required: true,
    //   default: '',
    // }
    src: {
      type: String,
      default: '',
    },
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    fileChange(file, fileList) {
      console.log(file, fileList)
    },
    // 移除
    onRemove(file, fileList) {
      // console.log(file, fileList)
    },
    // 点击文件列表文件
    onPreview(file) {
      // console.log(file)
    },
    // 上传成功
    onSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
    },
    // 上传失败
    onError(err, file, fileList) {
      console.log(file)
      this.$message.error({
        message: '上传失败,请检测网络连接',
      })
    },
    // 关闭盒子
    exit_upload(e) {
      console.log(11)
      this.card_state = false
    },
    stopPropagationfun(e) {},
  },
}
</script>

<style scoped>
.card_body {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.card_box {
  position: relative;
  width: 60vw;
  /* height: 180px; */
  padding-bottom: 70px;
}
.error_lists {
  color: brown;
}
.exit_icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 25px;
  font-weight: 100;
}
.exit_button {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>